<template>
  <div
    class="c-w100 c-h c-bg-white c-content-auto"
    ref="conttenAuto"
  >
    <template v-if="categoryTheme == 1">
      <div class="c-w100 c-h c-flex-row">
        <!-- 左侧 -->
        <div
          class="c-ww150 c-h c-bg-sgray c-contexty-scroll c-scroll-touch menu-scroll-view"
          ref="scrollTop"
        >
          <div
            class="c-bg-white c-hh100"
            v-for="(item, index) in leftList"
            :key="index"
          >
            <div
              class="c-h c-flex-row c-flex-center c-bg-sgray c-p menu-tab-item"
              @click.stop="swichMenuT4(index, item.catId)"
              :class="[current==index?'active':'', index == current - 1?'c-br-br10':'', index == current + 1?'c-br-tr10':'']"
            >
              <p
                :class="[current == index ? 'theme-fc c-fw500':'']"
                class="c-fs22 c-textAlign-c c-w100 c-ph20 c-fc-sblack c-text-ellipsis2"
              >{{item.name}}</p>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div
          class="c-bg-white c-w0 c-flex-grow1 c-contexty-scroll c-scroll-touch "
          ref="rightScrollTop"
          id="rightScrollTop"
          @scroll="scrollContent($event)"
        >
          <div class="fixTop">
            <new-search-bar
              class=""
              :placeholder="'搜索'"
              @search='startSearchT4'
              @cancel='startSearchT4'
              @inputFocus='inputFocus'
              @inputBlur='inputBlur'
            ></new-search-bar>
            <div class="c-flex-row c-aligni-center c-justify-sb c-ph24 c-mt12">
              <div class="c-flex-row c-aligni-center">
                <div @click="changeCatesAll" class="c-flex-row c-aligni-center c-pr20 c-lh c-fs22" :class="isShowAll == 1 ? 'theme-fc' : 'c-fc-sblack'">全部</div>
                <div @click="changeCates" class="c-flex-row c-aligni-center c-lh">
                  <div class="c-fs22" :class="isShowAll == 0 ? 'theme-fc' : 'c-fc-sblack'">筛选</div>
                  <div class="iconfont c-fs20 c-fc-sblack c-ml4 c-rotate90">&#xe635;</div>
                </div>
              </div>
              <div v-show="styleType == 1" @click="changeStyleType(2)" class="iconfont c-fs26 c-fc-sblack">&#xe98a;</div>
              <div v-show="styleType == 2" @click="changeStyleType(1)" class="iconfont c-fs26 c-fc-sblack">&#xe989;</div>
            </div>
          </div>
          <div class="c-ph24 c-pt160">
            <div v-show="styleType == 1">
              <template v-for="(item, index) in rightListArr">
                <div
                  class="c-flex-row"
                  :key="index"
                  v-if="item.isShow == 1"
                  :class="index == rightListArr.length - 1?'':'c-mb30'"
                  @click="handleClickItem(item)"
                >
                  <div class="c-ww180 c-hh120 c-text-ellipsis1 c-mr20 c-p">
                    <CoverImg :coverSizeClass="'c-w100 c-h c-br10 c-text-hidden'" :coverUrl="item.prodAvatar" :prodType="item.prodType" />
                    <!-- <img
                      class="c-w100 c-maxh270 c-br10"
                      :src="$addXossFilter(!!item.prodAvatar ? item.prodAvatar : (item.prodType == 8 && item.prodAvatar == '') ? require('@/assets/i/wap/datum/datumsDefault.png') : require('@/assets/defult270.png'))"
                      alt=""
                    > -->
                    <vip-status v-if="categoryConfs && categoryConfs.catVipBadge == 1" :item="item"></vip-status>
                    <div v-if="item.prodType == 7" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl10 c-br-br10 c-pa c-p-l0 c-p-t0" :class="item.detailInfo.enrollStatus==2 || item.detailInfo.status==2 ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.enrollStatus==2?'已结束':(item.detailInfo.status==1?'报名中':(item.detailInfo.status==0?'即将报名':(item.detailInfo.status==2?'报名截止':'已结束')))}}</div>
                    <div v-if="item.prodType == 78" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl10 c-br-br10 c-pa c-p-l0 c-p-t0" :class="(item.detailInfo.joinMode == 2 && item.detailInfo.status == -1) || (item.detailInfo.joinMode == 1 && item.detailInfo.termStatus==5) ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.joinMode == 2 ? (item.detailInfo.status == -1 ? '不招生/开课' : '招生中/开课中') : termStatus[item.detailInfo.termStatus]}}</div>
                    <div v-if="item.prodType == 53 && item.detailInfo.enrollCount > 0" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl10 c-br-br10 c-pa c-p-l0 c-p-t0 c-bg-vgreen">{{item.detailInfo.enrollCount | formatNumber}}次预约</div>
                    <div v-if="item.detailInfo.isUpdating == 1 && item.prodType == 9 && enableColumnRelates == 1" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl10 c-br-br10 c-pa c-p-l0 c-p-t0 c-bg-vgreen">更新中</div>
                  </div>
                  <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb">
                    <p class="c-fs24 c-fc-xblack c-text-ellipsis2 c-fw600">
                      <span class="c-vcAlign-middle">{{item.prodName}}</span>
                    </p>
                    <div class="c-fs26 c-fc-xmlred">
                      <!-- 活动 -->
                      <template v-if="item.prodType == ckFrom.activity">
                        <div class="c-fs26 c-fw600" v-if="item.detailInfo.price && item.detailInfo.isShowPrice == 1 && !$isWxAppIos()">
                          <span class="c-fs26" v-if="item.detailInfo.price.split('~')[0]!=item.detailInfo.price.split('~')[1] || Number(item.detailInfo.price.split('~')[0]) !=0">
                            <span class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                            <span v-if="item.detailInfo.price.split('~')[0]!=item.detailInfo.price.split('~')[1]">{{item.detailInfo.price.split('~')[0]}}起</span>
                            <span v-else>{{item.detailInfo.price.split('~')[1]}}</span>
                          </span>
                          <span class="c-fs24" v-if="item.detailInfo.price.split('~')[0]==item.detailInfo.price.split('~')[1] && (Number(item.detailInfo.price.split('~')[0])==0)">免费</span>
                        </div>
                      </template>
                      <!-- 商城商品 -->
                      <template v-else-if="item.prodType == ckFrom.shopping">
                        <div class="c-fs26 c-fw600">
                          <span class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                          <span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}</span>
                        </div>
                      </template>
                      <!-- 小班课 -->
                      <template v-else-if="item.prodType == ckFrom.privateClass">
                        <div v-if="(item.detailInfo.payType == 1 && item.detailInfo.price * 1 == 0)||item.detailInfo.payType == 4" class="c-fs24 c-fw600">{{item.detailInfo.payType == 4?"审核参与":"免费"}}</div>
                        <div v-else-if="item.detailInfo.payType == 3" class="c-fs24 c-fw600">加密</div>
                        <div v-else class="c-fs26 c-fw600"><span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.price | moneyStr}}</div>
                      </template>
                      <!-- 资料 -->
                      <template v-else-if="item.prodType == ckFrom.datum">
                        <span class="c-fs24 c-fw600" v-if="item.detailInfo.isSaleOnly == 0">关联售卖</span>
                        <span class="c-fs24 c-fw600" v-else-if="item.detailInfo.permission == 19">免费</span>
                        <div class="c-fs26 c-fw600" v-else>
                          <span class="c-fs24" v-if="item.detailInfo.permission == 21">加密</span>
                          <span :class="item.detailInfo.price==0?'c-fs24':'c-fs26'" v-if="item.detailInfo.permission != 21"><span class="c-fs20">{{'￥' | iosPriceFilter('Datum')}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}</span>
                        </div>
                      </template>
                      <template v-else-if="item.prodType == ckFrom.camp || item.prodType == ckFrom.clockIn">
                        <span class="c-fw600" :class="item.detailInfo.payType == 2 ? 'c-fs26' : 'c-fs24'">
                          <span v-if="item.detailInfo.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                        </span>
                      </template>
                      <template v-else>
                        <span v-if="item.detailInfo.isSaleOnly == 0" class="c-fs24 c-fw600">关联售卖</span>
                        <span v-else class="c-fw600" :class="item.detailInfo.payType == 2 ? 'c-fs26' : 'c-fs24'">
                          <span v-if="item.detailInfo.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                        </span>
                      </template>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <div v-show="styleType == 2" class="c-flex-row c-flexw-wrap c-justify-sb">
              <template v-for="(item, index) in rightListArr">
                <div
                  class="w204 c-mb30"
                  :key="index"
                  v-if="item.isShow == 1"
                  @click="handleClickItem(item)"
                >
                  <div class="w204 h132 c-p">
                    <CoverImg :coverSizeClass="'c-w100 c-h c-br10 c-text-hidden'" :coverUrl="item.prodAvatar" :prodType="item.prodType" />
                    <!-- <img
                      class="c-w100 c-h c-object-fit-c c-br16"
                      :src="$addXossFilter(!!item.prodAvatar ? item.prodAvatar : (item.prodType == 8 && item.prodAvatar == '') ? require('@/assets/i/wap/datum/datumsDefault.png') : require('@/assets/defult270.png'))"
                      alt=""
                    > -->
                    <vip-status v-if="categoryConfs && categoryConfs.catVipBadge == 1" :item="item"></vip-status>
                    <div v-if="item.prodType == 7" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl10 c-br-br10 c-pa c-p-l0 c-p-t0" :class="item.detailInfo.enrollStatus==2 || item.detailInfo.status==2 ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.enrollStatus==2?'已结束':(item.detailInfo.status==1?'报名中':(item.detailInfo.status==0?'即将报名':(item.detailInfo.status==2?'报名截止':'已结束')))}}</div>
                    <div v-if="item.prodType == 78" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl10 c-br-br10 c-pa c-p-l0 c-p-t0" :class="(item.detailInfo.joinMode == 2 && item.detailInfo.status == -1) || (item.detailInfo.joinMode == 1 && item.detailInfo.termStatus==5) ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.joinMode == 2 ? (item.detailInfo.status == -1 ? '不招生/开课' : '招生中/开课中') : termStatus[item.detailInfo.termStatus]}}</div>
                    <div v-if="item.prodType == 53 && item.detailInfo.enrollCount > 0" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl10 c-br-br10 c-pa c-p-l0 c-p-t0 c-bg-vgreen">{{item.detailInfo.enrollCount | formatNumber}}次预约</div>
                    <div v-if="item.detailInfo.isUpdating == 1 && item.prodType == 9 && enableColumnRelates == 1" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl10 c-br-br10 c-pa c-p-l0 c-p-t0 c-bg-vgreen">更新中</div>
                  </div>
                  <p class="c-fs24 c-fc-xblack c-text-ellipsis1 c-mt12 c-fw600">
                    <span class="c-vcAlign-middle">{{item.prodName}}</span>
                  </p>
                  <div class="c-fs26 c-fc-xmlred c-mt8">
                    <!-- 活动 -->
                    <template v-if="item.prodType == ckFrom.activity">
                      <div class="c-fs26 c-fw600" v-if="item.detailInfo.price && item.detailInfo.isShowPrice == 1 && !$isWxAppIos()">
                        <span class="c-fs26" v-if="item.detailInfo.price.split('~')[0]!=item.detailInfo.price.split('~')[1] || Number(item.detailInfo.price.split('~')[0]) !=0">
                          <span class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                          <span v-if="item.detailInfo.price.split('~')[0]!=item.detailInfo.price.split('~')[1]">{{item.detailInfo.price.split('~')[0]}}起</span>
                          <span v-else>{{item.detailInfo.price.split('~')[1]}}</span>
                        </span>
                        <span class="c-fs24" v-if="item.detailInfo.price.split('~')[0]==item.detailInfo.price.split('~')[1] && (Number(item.detailInfo.price.split('~')[0])==0)">免费</span>
                      </div>
                    </template>
                    <!-- 商城商品 -->
                    <template v-else-if="item.prodType == ckFrom.shopping">
                      <div class="c-fs26 c-fw600">
                        <span class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                        <span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}</span>
                      </div>
                    </template>
                    <!-- 小班课 -->
                    <template v-else-if="item.prodType == ckFrom.privateClass">
                      <div v-if="(item.detailInfo.payType == 1 && item.detailInfo.price * 1 == 0)||item.detailInfo.payType == 4" class="c-fs24 c-fw600">{{item.detailInfo.payType == 4?"审核参与":"免费"}}</div>
                      <div v-else-if="item.detailInfo.payType == 3" class="c-fs24 c-fw600">加密</div>
                      <div v-else class="c-fs26 c-fw600"><span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.price | moneyStr}}</div>
                    </template>
                    <!-- 资料 -->
                    <template v-else-if="item.prodType == ckFrom.datum">
                      <span class="c-fs24 c-fw600" v-if="item.detailInfo.isSaleOnly == 0">关联售卖</span>
                      <span class="c-fs24 c-fw600" v-else-if="item.detailInfo.permission == 19">免费</span>
                      <div class="c-fs26 c-fw600" v-else>
                        <span class="c-fs24" v-if="item.detailInfo.permission == 21">加密</span>
                        <span :class="item.detailInfo.price==0?'c-fs24':'c-fs26'" v-if="item.detailInfo.permission != 21"><span class="c-fs20">{{'￥' | iosPriceFilter('Datum')}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}</span>
                      </div>
                    </template>
                    <template v-else-if="item.prodType == ckFrom.camp || item.prodType == ckFrom.clockIn">
                      <span class="c-fw600" :class="item.detailInfo.payType == 2 ? 'c-fs26' : 'c-fs24'">
                        <span v-if="item.detailInfo.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                      </span>
                    </template>
                    <template v-else>
                      <span v-if="item.detailInfo.isSaleOnly == 0" class="c-fs24 c-fw600">关联售卖</span>
                      <span v-else :class="item.detailInfo.payType == 2 ? 'c-fs26' : 'c-fs24'" class="c-fw600">
                        <span v-if="item.detailInfo.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                      </span>
                    </template>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <loading-status-tem
            :dataStatus="dataStatus"
            noDataText="暂无数据"
          ></loading-status-tem>
        </div>
      </div>
    </template>
    <cj-popup v-model="openCatesModal" round position="bottom" @close="openCatesModal = false">
      <div class="c-hh700 c-bg-white c-flex-column">
        <div class="c-hh80 c-flex-row c-flex-center c-fs28 c-p c-fw600 c-flex-shrink0">筛选
          <span class="c-fs32 c-fc-sgray c-pa c-p-r24 c-p-t24 iconfont" @click="openCatesModal = false">&#xe750;</span>
        </div>
        <div class="c-flex-row c-h0 c-flex-grow1">
          <div
            class="c-flex-1 c-h c-content-scroll c-scroll-touch menu-scroll-view c-bg-f5 modal-menu-wrap"
            ref="modalMenuL1"
          >
            <div
              class="c-w100 c-hh100 c-bg-f5 modal-menu-item"
              v-for="(item, index) in firstList"
              :key="index"
              @click="swichModalMenu1(item.catId, index, item.name)"
              :class="[index == current - 1?'c-br-br10':'', index == current + 1?'c-br-tr10':'']"
            >
              <div
                class="c-h c-flex-row c-flex-center c-p menu-tab-item"
                :class="[current==index?'active-pop':'', index == current - 1?'c-br-br10':'', index == current + 1?'c-br-tr10':'']"
              >
                <p
                  :class="current == index ? 'theme-fc c-fw600':'c-fc-sblack'"
                  class="c-fs22 c-textAlign-c c-w100 c-ph20 c-text-ellipsis2"
                >{{item.name}}</p>
              </div>
            </div>
            <div
              class="c-fs22 c-fc-gray c-w100 c-hh100 c-textAlign-c c-flex-row c-flex-center"
              v-if="firstList.length == 0"
            >暂无分组</div>
          </div>
          <div
            class="c-flex-1 c-h select-center c-content-scroll c-scroll-touch menu-scroll-view2"
            ref="modalMenuL2"
          >
            <div
              class="c-w100 c-hh100 select-center "
              v-for="(twoItem, currentTwoIndex) in twoList"
              :key="currentTwoIndex"
              @click="swichModalMenu2(twoItem.catId, currentTwoIndex, twoItem.name)"
            >
              <div class="c-h c-flex-row c-flex-center menu-tab-item2">
                <p
                  :class="currentSecondIndex == currentTwoIndex ? 'theme-fc c-fw600':'c-fc-sblack'"
                  class="c-fs22 c-textAlign-c c-w100 c-ph20 c-text-ellipsis2"
                >{{twoItem.name}}</p>
              </div>
            </div>
            <div
              class="c-fs22 c-fc-gray c-w100 c-hh100 c-textAlign-c c-flex-row c-flex-center"
              v-if="twoList.length == 0"
            >暂无分组</div>
          </div>
          <div
            class="c-flex-1 c-h c-bg-white c-content-scroll c-scroll-touch menu-scroll-view3"
            ref="modalMenuL3"
          >
            <div
              class="c-w100 c-hh100 c-bg-white "
              v-for="(threeItem, currentThreeIndex) in threeList"
              :key="currentThreeIndex"
              @click="swichModalMenu3(threeItem.catId, currentThreeIndex, threeItem.name)"
            >
              <div class="c-h c-flex-row c-flex-center menu-tab-item3">
                <p
                  :class="currentThirdIndex == currentThreeIndex ? 'theme-fc c-fw600':'c-fc-sblack'"
                  class="c-fs22 c-textAlign-c c-w100 c-ph20 c-text-ellipsis2"
                >{{threeItem.name}}</p>
              </div>
            </div>
            <div
              class="c-fs22 c-fc-gray c-w100 c-hh100 c-textAlign-c c-flex-row c-flex-center"
              v-if="threeList.length == 0"
            >暂无分组</div>
          </div>
        </div>
        <div class="c-w100 c-hh88 c-flex-row c-flex-center c-bg-white c-ph24 c-flex-shrink0">
          <div class="c-flex-row c-flex-grow1 c-br32 c-text-hidden">
            <div
              class="c-flex-row c-flex-grow1 c-flex-center c-hh64 c-fs24 theme-fc theme-bg-10"
              @click="resetCates()"
            >重置</div>
            <div
              class="c-flex-row c-flex-grow1 c-flex-center c-hh64 c-fs24 c-fc-white theme-bg"
              @click="clickSubmit()"
            >确定</div>
          </div>
        </div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import newSearchBar from "@/components/templates/common/newSearchBar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import vipStatus from '@/components/templates/common/vipStatus.vue'
import CoverImg from '@/components/templates/common/coverImg.vue';
export default {
  name: "CourseOne",
  components: {
    loadingStatusTem,
    newSearchBar,
    vipStatus,
    CoverImg
  },
  props: {
    categoryTheme: {
      type: Number,
      default: 1,
    },
    leftList: {
      type: Array,
      default: []
    },
    rightList: {
      type: Array,
      default: []
    },
    initCatId: {
      type: String,
      default: ''
    },
    currentIndex: {
      type: Number,
      default: -1
    },
    categoryConfs: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      rightListArr: [],
      dataStatus: 'HAS_MORE_DATA',
      current: -1,
      theme: localStorage.getItem("colorName") || 'mb5_default',
      menuHeight: 0, //左边菜单的高度
      menuItemHeight: 0, //左边菜单item的高度
      page: 1,
      LIMIT: 10,
      searchText: '',
      styleType: 1,
      currentSecondIndex: -1,
      currentThirdIndex: -1,
      currentFirstId: 0,
      currentSecondId: 0,
      currentThirdId: 0,
      openCatesModal: false,
      firstList: [],
      twoList: [],
      threeList: [],
      menuModalHeight: 0, //弹窗菜单的高度
      menuModalItemHeight: 0, //弹窗item的高度
      ckFrom: global.ckFrom,
      isShowAll: 1,
      termStatus: {
        1: '待招生',
        2: '招生中',
        3: '待开课',
        4: '开课中',
        5: '已结束',
        6: '招生中/开课中',
      },
      enableColumnRelates: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableColumnRelates : 1,
    }
  },
  mounted() {
    this.rightListArr = this.rightList;
    this.isShowAll = 1;
  },
  activated() {
    this.dataStatus = 'HAS_MORE_DATA';
    // this.current = -1;
    this.page = 1;
    this.LIMIT = 10;
    this.searchText = '';
    this.isApp = utilJs.isAndroidApp() || utilJs.isIOSApp();
  },
  watch: {
    currentIndex: {
      handler(newVal) {
        this.current = newVal
      },
      immediate: true,
    },
    rightList: function (newVal, oldVal) {
      this.rightListArr = newVal
    },
    initCatId: function (newVal, oldVal) {
      this.currentFirstId = newVal
      if (this.twoList.length == 0) {
        this.getChildCategory(this.currentFirstId).then(res => {
          this.twoList = res;
        })
      }
    },
    leftList: function (newVal, oldVal) {
      this.firstList = newVal
    },
  },
  computed: {
    filterPrice() {
      return function (payType, price, prodType, isSaleOnly) {
        if (payType == 1) {
          if (isSaleOnly == 0) {
            return "关联售卖";
          } else {
            return "免费";
          }
        } else if (payType == 2) {
          if (isSaleOnly == 0) {
            return "关联售卖";
          } else {
          if (localStorage.getItem('isWxAppIos') && localStorage.getItem('isWxAppIos') == 1) return ''
            return price;
          }
        } else if (payType == 3) {
          if (isSaleOnly == 0) {
            return "关联售卖";
          } else {
            return "加密";
          }
        } else if (payType == 4) {
          if (prodType == global.ckFrom.camp || prodType == global.ckFrom.clockIn) { //训练营， 打卡 奖金参与
            return price;
          } else if (prodType == global.ckFrom.privateClass) { // 小班课代表审核参与
            return "审核参与";
          } else {
            return price;
          }
        } else if (payType == 5) {
          return '指定购买';
        } else if (payType == 6) {
          return '指定学员';
        } else {
          if (localStorage.getItem('isWxAppIos') && localStorage.getItem('isWxAppIos') == 1) return ''
          // 若是活动类型价格的时候
          if (prodType == global.ckFrom.activity) {
            if (price.split('~')[0] != price.split('~')[1] || Number(price.split('~')[0]) != 0) {
              if (price.split('~')[0] != price.split('~')[1]) {
                return price.split('~')[0] + '起'
              } else {
                return price.split('~')[1]
              }
            } else if (price.split('~')[0] == price.split('~')[1] && Number(price.split('~')[0]) == 0) {
              return '免费'
            }
          } else {
            return price;
          }
        }
      }
    }
  },
  methods: {
    clickSubmit() {
      this.isShowAll = 0;
      this.page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.getMoreC();
      this.openCatesModal = false;
    },
    resetCates() {
      this.currentSecondIndex = -1;
      this.currentThirdIndex = -1;
      this.currentSecondId = 0;
      this.currentThirdId = 0;
      this.threeList = [];
    },
    getChildCategory(parentId) {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + `courses/getChildCategory?parentId=${parentId}`, res => {
          resolve(res)
        }, failRes => {
          reject(failRes)
        })
      })
    },
    swichModalMenu1(catId, index, name) {
      if (index == this.current) return;
      this.current = index;
      this.currentSecondIndex = -1;
      this.currentThirdIndex = -1;
      this.currentFirstId = catId;
      this.currentSecondId = 0;
      this.currentThirdId = 0;
      this.threeList = [];
      this.getChildCategory(catId).then(res => {
        this.twoList = res;
      })
      this.$emit('swichMenuOne', index, catId)
    },
    swichModalMenu2(catId, index, name) {
      if (index == this.currentSecondIndex) {
        this.currentSecondIndex = -1;
        this.currentThirdIndex = -1;
        this.currentSecondId = 0;
        this.currentThirdId = 0;
        this.threeList = [];
      } else {
        this.currentSecondIndex = index;
        this.currentThirdIndex = -1;
        this.currentSecondId = catId;
        this.currentThirdId = 0;
        this.threeList = [];
        this.getChildCategory(catId).then(res => {
          this.threeList = res;
        })
      }
    },
    swichModalMenu3(catId, index, name) {
      if (index == this.currentThirdIndex) {
        this.currentThirdIndex = -1;
        this.currentThirdId = 0;
      } else {
        this.currentThirdIndex = index;
        this.currentThirdId = catId;
      }
    },
    changeCatesAll() {
      this.isShowAll = 1;
      this.currentSecondIndex = -1;
      this.currentThirdIndex = -1;
      this.currentSecondId = 0;
      this.currentThirdId = 0;
      this.threeList = [];
      this.page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.getMoreC();
      // this.$emit('swichMenuOne', index, catId)
    },
    changeCates() {
      this.openCatesModal = true;
      this.$nextTick(() => {
        this.scrollModalLevel1();
        this.scrollModalLevel2();
        this.scrollModalLevel3();
      })
    },
    scrollModalLevel1() {
      if (this.isApp || this.current < 0)
        return;
      if (this.menuModalHeight == 0 || this.menuModalItemHeight == 0) {
        this.getEleHeight('.modal-menu-wrap', 'menuModalHeight');
        this.getEleHeight('.modal-menu-item', 'menuModalItemHeight');
      }
      this.$refs.modalMenuL1.scrollTo({
        top: this.current * this.menuModalItemHeight + this.menuModalItemHeight / 2 - this.menuModalHeight / 2,
        behavior: 'smooth'
      })
    },
    scrollModalLevel2() {
      if (this.isApp || this.currentSecondIndex < 0)
        return;
      if (this.menuModalHeight == 0 || this.menuModalItemHeight == 0) {
        this.getEleHeight('.modal-menu-wrap', 'menuModalHeight');
        this.getEleHeight('.modal-menu-item', 'menuModalItemHeight');
      }
      this.$refs.modalMenuL2.scrollTo({
        top: this.currentSecondIndex * this.menuModalItemHeight + this.menuModalItemHeight / 2 - this.menuModalHeight / 2,
        behavior: 'smooth'
      })
    },
    scrollModalLevel3() {
      if (this.isApp || this.currentThirdIndex < 0)
        return;
      if (this.menuModalHeight == 0 || this.menuModalItemHeight == 0) {
        this.getEleHeight('.modal-menu-wrap', 'menuModalHeight');
        this.getEleHeight('.modal-menu-item', 'menuModalItemHeight');
      }
      this.$refs.modalMenuL2.scrollTo({
        top: this.currentThirdIndex * this.menuModalItemHeight + this.menuModalItemHeight / 2 - this.menuModalHeight / 2,
        behavior: 'smooth'
      })
    },
    changeStyleType(type) {
      this.styleType = type;
      this.$forceUpdate();
    },
    // 一级分类模板四获取产品分页列表
    getMoreC() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let cUrl = `${global.apiurl}courses/v2/courseListInCategory?level1CatId=${this.currentFirstId}&level2CatId=${this.currentSecondId}&level3CatId=${this.currentThirdId}&prodName=${this.searchText}&page=${this.page}&limit=20&isShowAll=${this.isShowAll}`
      utilJs.getMethod(cUrl, (res) => {
        let courseListTmp = [];
        if (res.list.data && res.list.data.length > 0) {
          courseListTmp = res.list.data.filter(function (cItem) {
            return cItem.isShow == 1;
          })
        }
        if (res.listType != 1) {
          if (this.page == 1) {
            this.rightListArr = courseListTmp;
          } else {
            this.rightListArr = [...this.rightListArr, ...courseListTmp];
          }
          if (!res.list.next_page_url) {
            this.dataStatus = res.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            this.page++;
          }
        }
      });
    },
    swichMenuT4(index, catId) {
      if (index == this.current) return;
      this.current = index;
      this.currentSecondIndex = -1;
      this.currentThirdIndex = -1;
      this.currentFirstId = catId;
      this.currentSecondId = 0;
      this.currentThirdId = 0;
      this.twoList = [];
      this.threeList = [];
      if (!this.isApp) {
        this.scrollLeftView(index);
        this.$refs.rightScrollTop.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      }
      // 初始化数据
      this.page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.getMoreC();
      this.$emit('swichMenuOne', index, catId)
    },
    startSearchT4(e) {
      this.dataStatus = 'HAS_MORE_DATA';
      this.page = 1;
      this.searchText = e.searchValue;
      this.rightListArr = [];
      this.getMoreC();
    },
    handleClickItem(item) {
      this.$emit('handleClickItem', item)
    },
    handleClickDetail(cateId1, cateId2, cateId3, name) {
      this.$emit('handleClickDetail', cateId1, cateId2, cateId3, name);
    },
    contentTo() {
      this.$nextTick(() => {
        let element = document.getElementById(`selectId${this.initCatId}`);
        let scrollTop = element.offsetTop - element.offsetHeight;
        this.$refs.conttenAuto.scrollTo({
          top: scrollTop,
        })
      })
    },
    scrollContent(event) {
      this.handleScroll();
    },
    handleScroll() {
      let element = document.getElementById('rightScrollTop');
      utilJs.elementLoading(element, () => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.rightListArr.length > 0) {
          if (this.categoryTheme == 1) {
            this.getMoreC();
          }
        }
      })
    },
    scrollLeftView(index) {
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        this.getEleHeight('.menu-scroll-view', 'menuHeight');
        this.getEleHeight('.menu-tab-item', 'menuItemHeight');
      }
      this.$refs.scrollTop.scrollTo({
        top: index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2,
        behavior: 'smooth'
      })
    },
    getEleHeight(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = document.querySelector(elClass);
        if (!query) {
          setTimeout(() => {
            this.getEleHeight(elClass);
          }, 10);
          return;
        }
        this[dataVal] = query.clientHeight;
      })
    }
  },
}
</script>

<style lang="less" scoped>
.classifyItem:nth-child(3n + 2) {
  margin-left: 1.575rem;
  margin-right: 1.575rem;
}
.classifyItem1:nth-child(2n + 1) {
  margin-right: 0.5rem;
}
.active {
  background: #fff;
}
.active:before {
  position: absolute;
  top: 0.95rem;
  left: 0.1rem;
  width: 0.15rem;
  height: 0.6rem;
  border-radius: 0.1rem;
  background: var(--rgbcolor);
  content: "";
}
.fixTop {
  position: fixed;
  z-index: 100;
  width: calc(16rem - 3.75rem);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: hidden;
  padding: 0.2rem 0 0.4rem 0;
  background: #fff;
}
.w204 {
  width: 5.1rem;
}
.h132 {
  height: 3.4rem;
}
.active-pop {
  background: #fafafa;
}
.select-center {
  background: #fafafa;
}
</style>